<template>
  <view class="container" style="padding-bottom: 100px" v-if="isLoaded">
    <view class="content" style="padding: 30rpx 30rpx 120rpx; background-color: #fff">
      <li-form ref="form">
        <li-form-item label="账号">
          <li-input disabled v-model="form.userName" />
        </li-form-item>
        <li-form-item label="账号类型" required>
          <li-picker
            disabled
            v-model="form.userType"
            :rangeList="[
              {
                id: 0,
                text: `管理员`
              },
              {
                id: 1,
                text: `员工`
              },
              {
                id: 2,
                text: `股东`
              }
            ]"
          />
        </li-form-item>
        <li-form-item label="昵称" required>
          <li-input v-model="form.nickName" rule="trim" prop="nickName" v-on:blur="onBlurEvent($event)" />
        </li-form-item>
        <li-form-item label="性别">
          <li-picker v-model="form.sex" :rangeList="sexEnum" />
        </li-form-item>
        <li-form-item label="手机号" required>
          <li-input v-model="form.phone" rule="trim" prop="phone" v-on:blur="onBlurEvent($event)" />
        </li-form-item>
        <li-form-item label="初始密码" required>
          <li-input v-model="form.defaultPassWord" rule="trim" prop="defaultPassWord" v-on:blur="onBlurEvent($event)" />
        </li-form-item>
        <li-form-item label="角色">
          <li-checkbox v-model="form.roles" :rangeList="SysRoleList" :rangeKey="'roleName'" v-on:change="onRolesChange($event)" />
        </li-form-item>
      </li-form>
    </view>
    <!-- popup -->

    <li-bottom-btns :zIndex="10" :mode="mode" v-on:btnDelClick="btnDelClick" v-on:btnEditOrSaveSubmitClick="btnEditOrSaveSubmitClick" />
  </view>
</template>
<script>
import liFormMixin from '../../../mixins/liFormMixin';
import dateUtils from '../../../utils/date.js';
import { transferTypeEnum } from '../../../common/dataTransfer.js';
import { checkerType, modeEnum, booleanEnum, weekEnumable, couponTypeEnum, sexEnum } from '../../../constants/normalConstants.js';
import { corpId, storeId } from '../../../constants/apiConstants.js';

import liValidateData, { validateTypeEnum } from '../../../utils/liValidator.js';
import { utoast } from '../../../utils/uniUtils.js';
import { GetSysOrganizationList } from '../../../common/api.js';
import { AddSysUser, DelSysUserById, EditSysUser, GetSysRoleList, GetSysUserById } from '../../../common/modules/m.js';
import { GetDepartmentList } from '../../../common/modules/business.js';

export default {
  mixins: [liFormMixin],
  async onLoad(options) {
    this.loadEvent(options, this);
  },

  async mounted() {
    this.mountedEvent(this, {
      userType: 1,
      defaultPassWord: '',
      sex: 1,
      nickName: '',
      phone: '',
      roles: []
    });
  },

  data() {
    return {
      sexEnum,
      modeEnum,
      weekEnumable,
      booleanEnum,
      couponTypeEnum,
      subject: '用户',
      rootRoute: 'workbench',
      routeName: 'user',
      mode: 'add',
      isLoaded: false,
      id: null,
      getFn: GetSysUserById,
      addFn: AddSysUser,
      delFn: DelSysUserById,
      editFn: EditSysUser,
      popLeftFn: null,
      popLeftList: [],
      popPageFn: null,
      popPageList: [],
      otherDataFns: [
        {
          fn: GetSysRoleList,
          name: 'SysRoleList'
        }
      ],
      /* form */
      form: null,
      /* popup */
      show: false,
      // transfer
      transferRules: [
        /*   {
          name: "programmeCode",
          type: transferTypeEnum.trim,
        },
        {
          name: "programmeName",
          type: transferTypeEnum.trim,
        }, */
      ],
      //check rule
      rules: {
        nickName: {
          type: validateTypeEnum.string,
          required: true,
          message: '请填写昵称'
        },
        phone: {
          asyncValidator: (_rule, value, _callback) =>
            new Promise((resolve, reject) => {
              if (value.length == 0) {
                reject('手机号不能为空！');
              }
              if (!/^1[3-9]\d{9}$/.test(value)) {
                reject('手机号格式不正确！');
              }
              resolve(true);
            })
        },
        defaultPassWord: {
          asyncValidator: (_rule, value, _callback) =>
            new Promise((resolve, reject) => {
              if (value.length < 6) {
                reject('密码太短了！');
              }
              resolve(true);
            })
        },
        roles: {
          asyncValidator: (_rule, value, _callback) =>
            new Promise((resolve, reject) => {
              if (value.length == 0 && this.SysRoleList.length > 0) {
                reject('角色不能为空！');
              }
              resolve(true);
            })
        }
      },
      lock: false,

      /* extra data */
      type: 1,
      popPageList: [],
      SysRoleList: []
      /* extra rules */

      /* extra transfer */
    };
  },

  methods: {
    async onBlurEvent(e) {
      this.formBlur(e, this);
    },

    async getOtherData() {
      await this.batchGetData(this.otherDataFns);
      if (this.mode == modeEnum.edit) {
        this.form.roles = JSON.parse(this.form.roleIds);
      }
      // ..
    },

    async btnEditOrSaveSubmitClick() {
      await this.formInsertOrEdit(this);
    },

    /* extra methods */
    onRolesChange(e) {
      let arr = [];
      e.detail.value.forEach((element) => {
        arr.push(parseInt(element));
      });
      this.form.roles = arr;
    }
    // method put on the top
  }
};
</script>
<style lang="scss" scoped>
@import '~@/static/styles/commonStyle.scss';
</style>
